<template>
  <div class="dormManagement-container">

    <el-table
        :data="roomStudentsList"
        style="width: 100%"
        @expand-change="handleExpendRow"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
              :data="scope.row.children"
              :header-cell-style="tableHeaderColor"
              style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column
                sortable
                align="center"
                prop="stuId"
                label="学号">
            </el-table-column>
            <el-table-column
                align="center"
                prop="stuName"
                label="姓名">
            </el-table-column>
            <el-table-column
                align="center"
                prop="major"
                label="专业">
            </el-table-column>
            <el-table-column
                align="center"
                prop="classId"
                label="班级">
            </el-table-column>
            <el-table-column
                align="center" show-overflow-tooltip label="操作">
              <template slot-scope="scope">
                <el-button size="small" icon="el-icon-delete" type="danger" circle @click="handleDeleteStudent(scope.row.stuId)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="dormName" sortable label="楼栋"></el-table-column>
      <el-table-column label="类别">
        <template slot-scope="scope">
          <span v-if="scope.row.dormType == 2">男</span>
          <span v-else-if="scope.row.dormType == 3">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="roomNum" label="房间号"></el-table-column>
      <el-table-column prop="nowNumber" label="当前人数"></el-table-column>
      <el-table-column prop="maxNumber" label="最大可居住人数"></el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" icon="el-icon-plus" type="primary" circle @click="add(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="宿舍分配"
        :visible.sync="addDialogVisible"
        width="60%"
        @close="closeDialog">
      <el-form :inline="true" :model="queryForm">
        <el-form-item>
          <el-input
              size="small"
              v-model.trim="queryForm.query"
              placeholder="请输入查询条件"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" size="small" @click="queryData">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="studentList"
          style="width: 100%">
        <el-table-column
            sortable
            align="center"
            prop="stuId"
            label="学号">
        </el-table-column>
        <el-table-column
            align="center"
            prop="stuName"
            label="姓名">
        </el-table-column>
        <el-table-column
            sortable
            align="center"
            prop="major"
            label="专业">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-plus" type="primary" circle @click="addRoom(scope.row.stuId)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          :current-page="queryForm.pageNum"
          :page-size="queryForm.pageSize"
          :layout="layout"
          :total="total"
          :page-sizes="[6, 10, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      roomStudentsList: [],
      dormTypeList: [],
      studentList: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        pageNum: 1,
        pageSize: 6,
        query: '',
      },
      roomId: '',
      addDialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const {data : res} = await this.$http.get('roomStudents')
      // console.log(res)
      this.roomStudentsList = res.data
    },
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryForm.pageSize = newSize
      this.queryData()
    },
    handleCurrentChange(newPage) {
      this.queryForm.pageNum = newPage
      this.queryData()
    },
    async queryData() {
      const {data : res} = await this.$http.get('students', { params : this.queryForm })
      // console.log(res)
      this.studentList = res.data
      this.total = res.total
    },
    add(id) {
      this.roomId = id
      this.queryData()
      this.addDialogVisible = true

    },
    async addRoom(id) {
      // console.log(id)
      const {data : res} = await this.$http.get('addRs?roomId=' + this.roomId + '&stuId=' + id)
      if (res.code == 500) return this.$message.error(res.msg)

      if (res.code == 200) return this.$message.success('宿舍分配成功')
    },
    handleDelete() {

    },
    async handleDeleteStudent(id) {

      // 提示消息
      const re = await this.$confirm('是否将学生移出该房间?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err)

      // console.log(re)
      if (re != 'confirm') return this.$message.info('取消了操作')
      const {data : res} = await this.$http.get('deleteLive?stuId=' + id)
      if (res.code != 200) return this.$message.error(res.msg)
      // await this.fetchData()
      this.$message.success('学生移出成功')
    },
    closeDialog() {
      this.fetchData()
    },
    tableHeaderColor(){
      // console.log(row,columnIndex,rowIndex,column)
      return 'background-color:white;color:lightslategray;font-size:14px;'

    },
    handleExpendRow(row, expandedRows) {
      // 打印父任务内容
      // console.log(row)
      //如果展开行数大于1
      if(expandedRows.length>0){
        //shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
        expandedRows.shift();
      }
    },
  }
}
</script>

<style lang="less" scoped>
.dormManagement-container {
  width: 98%;
  background: white;
  padding: 12px 16px 12px 16px;
}

.header-btn {
//text-align: left;
//display: flex;
//justify-content: space-between;
//align-items: center;
//color: black;
//font-size: 20px;

>.editAdd {
  height: 42px;
  display: flex;
  align-items: center;
  justify-items: center;
}
.query {
  height: 22px;
  margin-top: 22px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
}
}
.el-table >.el-table-column {
  height: 12px;
}

</style>
